<template>
    <div style="width: 1200px;margin: 0 auto">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item,index) in bannerArr" :key="item" >
          <img :src="item.imgUrl" style="position: fixed" width="100%" height="100%" @click="gotoDetail(index+1)"/>
        </el-carousel-item>
      </el-carousel>
      <router-view/>



  </div>
</template>

<script>

export default {
  name: "Index",
  components: {

  },
  data(){
  return{

    currentDate: new Date(),
    activeIndex:'',
    bannerArr:[],
    routeArr:[],
  }
  },
  methods:{
    gotoDetail(id){
      console.log(id);
      this.$router.push("/route?id="+id)
    },

    loadBanner(){
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/banners/1").then((response)=> {
        console.log("请求已发送")
        console.log((response.data.code))
        if (response.data.code === 1){
          this.bannerArr = response.data.data;
          console.log(this.bannerArr)
        }
      })
    },

  },
  mounted (){
    this.loadBanner();

  }
}
</script>

<style scoped>
.a:hover{
  color: #278996!important;
}
.bannerText{
  position: absolute;z-index: 1;
  color: white;
  bottom: 10px;left: 50px;right: 50px;

}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>